<template>
	<view class="main">
		<!-- 用户信息 -->
		<view class="user">
			<image :src="userImg" alt="" class="user-img" />
			<view class="info">
				<!-- <view class="user_btn"> -->
				<text>{{ userInfo.nickname?userInfo.nickname:"NULL" }}</text>
				<!-- </view> -->
				<text>用户编号：{{ userInfo.username?userInfo.username:"NULL" }}</text>
				<button @click="copyNumber">复制编号</button>
			</view>
		</view>

		<!-- 九宫格 -->
		<view class="grid-wrapper">
			<view class="nine-grid-container">
				<view class="nine-grid-item">
					<text>{{ userInfo.pendingOrderCount }}</text>
					<text>待审订单</text>
				</view>
				<view class="nine-grid-item">
					<text>{{ userInfo.passOrderCount }}</text>
					<text>已通过</text>
				</view>
				<view class="nine-grid-item">
					<text>{{ userInfo.obtainBalance }}</text>
					<text>已提现</text>
				</view>
				<view class="nine-grid-item" @click="handleParticipation">
					<up-icon name="checkmark-circle" src="https://t9.baidu.com/it/u=1678588758,2169378587&fm=193"
						size="24"></up-icon>
					<text>参与记录</text>
				</view>
				<view class="nine-grid-item" @click="handleUnderdevelopment">
					<up-icon name="rmb-circle" size="24"></up-icon>
					<text>提现</text>
				</view>
				<view class="nine-grid-item" @click="scanCode">
					<up-icon name="scan" size="24"></up-icon>
					<text>扫码</text>
				</view>
				<view class="nine-grid-item">
					<up-icon name="edit-pen" size="24"></up-icon>
					<text>完善资料</text>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getUserInfo
	} from '@/common/api.js'

	const userInfo = ref({
		"userImg": "",
		"nickname": "",
		"username": "",
		"pendingOrderCount": 0,
		"passOrderCount": 0,
		"obtainBalance": 0
	});
	onMounted(() => {
		// 获取用户信息
		getUserInfo('all').then((res) => {
			if (res.code === 200) {
				userInfo.value = res.data;
			} else {
				console.error('获取用户信息失败:', res);
				uni.showToast({
					title: '获取用户信息失败，请重试',
					icon: 'none',
				});
			}
		}).catch((err) => {
			console.error('请求失败:', err);
			uni.showToast({
				title: '网络错误，请检查连接',
				icon: 'none',
			});
		});


	});
	// 调用摄像头扫码功能
	const scanCode = () => {
		uni.scanCode({
			success: (res) => {
				console.log('扫码成功', res);
				result.value = res.result; // 获取扫描结果
				uni.showToast({
					title: '扫码成功',
					icon: 'success',
				});
			},
			fail: (err) => {
				// console.error('扫码失败', err);
				uni.showToast({
					title: '扫码失败，请重试',
					icon: 'none',
				});
			},
		});
	};

	const userImg = ref('https://iknow-pic.cdn.bcebos.com/a9d3fd1f4134970af7a1f9b187cad1c8a6865d5a');
	const userName = ref('饭星游客');
	const userNumber = ref('fx379640');
	// 用户待审核订单数量
	const orderNumber = ref(0);
	// 用户可提现金额
	const moneyNumber = ref(0);
	// 用户待审核订单数量
	const pendingOrder = ref(0);
	// 复制编号功能
	const copyNumber = () => {
		uni.setClipboardData({
			data: userNumber.value, // 要复制的文本内容
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				});
			},
			fail: () => {
				uni.showToast({
					title: '复制失败，请重试',
					icon: 'none',
				});
			},
		});
	};
	const handleParticipation = () => {
		uni.navigateTo({
			url: '/pages/user_participation_record/user_participation_record'
		});
	}
	const handleUnderdevelopment = () => {
		uni.showToast({
			title: '抱歉！当前功能未开发',
			icon: 'none',
		});
	};
</script>

<style lang="scss" scoped>
	.main {
		width: 95%;
		margin: auto;
	}

	/* 修改用户信息布局 */
	.user {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 12rpx;
		background: white;
		border: 1rpx solid #ddd;
		box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.user-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 2rpx solid #f62c33;
		margin-bottom: 12rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.info text {
		font-size: 30rpx;
		color: #333;
	}

	.info>button {
		height: 50rpx;
		line-height: 48rpx;
		width: 180rpx;
		font-size: 24rpx;
		text-align: center;
		color: #fff;
		background: #f62c33;
		border: none;
		border-radius: 8rpx;
	}

	.user_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 10rpx;
	}

	/* 九宫格容器 */
	.grid-wrapper {
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0rpx 6rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.nine-grid-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10rpx;
	}

	.nine-grid-item {
		width: calc(33.33% - 10rpx);
		height: 165rpx;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// font-size: 32rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.nine-grid-item text {
		margin-top: 8rpx;
		// font-size: 28rpx;
		color: #333;
	}

	.nine-grid-item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 8rpx;
	}
</style>